<template>
    <div>
        <el-card>
            <CategorySelector @idChange="idChange" ref="cs"></CategorySelector>
        </el-card>

        <el-card v-show="!showSub" style="margin-top: 20px">
            <div v-show="showList">
                <el-button @click="showAdd" :disabled="!category3Id" type="primary" icon="el-icon-plus">添加SPU</el-button>

                    <el-table style="margin: 20px 0" border :data="spuList" v-loading="loading">
                        <el-table-column label="序号" type="index" align="center" width="80px" ></el-table-column>

                        <el-table-column label="SPU名称" prop="spuName"></el-table-column>

                        <el-table-column label="SPU描述" prop="description"></el-table-column>

                        <el-table-column label="操作">
                            <template slot-scope="{row,$index}">
                                <HintButton @click="addSku(row)" title="添加SKU" type="primary" icon="el-icon-plus" size="mini" style="margin-right: 5px"></HintButton>
                                <HintButton @click="showEdit(row)" title="修改SPU" type="edit" icon="el-icon-edit" size="mini" style="margin-right: 5px"></HintButton>
                                <HintButton @click="handler(row)" title="查看所有SPU" type="info" icon="el-icon-search" size="mini" style="margin-right: 5px"></HintButton>
                                <el-popconfirm :title="`确定删除${row.spuName}吗？`" @onConfirm="deleteSpu(row)">
                                    <HintButton slot="reference" title="删除SPU" type="danger" icon="el-icon-delete" size="mini"></HintButton>
                                </el-popconfirm>
                            </template>
                        </el-table-column>
                </el-table>

                <el-pagination @size-change="handleSizeChange" @current-change="getSpuList" style="text-align: center"
                               :current-page="page" :page-sizes="[3, 5, 10]" :page-size="limit"
                               layout="prev, pager, next,jumper,->,sizes,total" :total="total">
                </el-pagination>

                <el-dialog @before-close="close" :title="`${spu.spuName}的sku列表 `" :visible.sync="dialogTableVisible">
                    <el-table :data="skuList" v-loading="loading">
                        <el-table-column prop="skuName" label="名称"></el-table-column>
                        <el-table-column prop="price" label="价格"></el-table-column>
                        <el-table-column prop="weight" label="重量"></el-table-column>
                        <el-table-column label="默认图片">
                            <template slot-scope="{row,$index}">
                                <img :src="row.skuDefaultImg" alt="" width="100px" height="100px">
                            </template>
                        </el-table-column>
                    </el-table>
                </el-dialog>
            </div>

            <!--<spuForm :vis="!showList" @update:vis="!showList = $event"></spuForm>-->
            <!-- 使用sync修改父组件数据 -->
            <!--<spuForm :vis.sync="showList"></spuForm>-->

            <!--使用$parent修改父组件数据-->
            <!--<spuForm v-show="!showList"></spuForm>-->

            <spuForm v-show="!showList" ref="spuForm" @success="successFn"></spuForm>
        </el-card>

        <el-card v-show="showSub" style="margin-top: 20px">
            <Sub @cancel="cancel" ref="sub"></Sub>
        </el-card>
    </div>
</template>

<script>
    import spuForm from '@/views/product/components/spuForm'
    import Sub from '@/views/product/components/Sub'
    export default {
        data() {
            return {
                category1Id: '',
                category2Id: '',
                category3Id: '',
                spuList: [],
                page: 1,
                limit: 3,           // 需要和page-sizes中某一个数据一致
                loading: false,
                total: 0,
                showList: true,
                showSub: false,
                dialogTableVisible: false,
                spu: {},

                skuList: [],
            }
        },

        methods: {
            cancel() {
                this.showSub = false;
            },

            idChange({id,level}) {
                if(level === 1) {
                    this.category1Id = id;
                    this.category3Id = '';
                    this.category2Id = '';
                    this.spuList = [];
                }else if(level === 2) {
                    this.category3Id = '';
                    this.category2Id = id;
                    this.spuList = [];
                }else {
                    this.category3Id = id;

                    this.getSpuList();
                }
            },

            async getSpuList(pager = 1) {
                this.page = pager;
                this.loading = true;
                const {code,data} = await this.$API.spu.getSupList(this.page,this.limit,this.category3Id);
                if(code === 200) {
                    this.loading = false;
                    this.spuList = data.records;
                    this.total = data.total;
                }
            },

            // 分页功能
            handleSizeChange(limit) {
                this.limit = limit;
                this.getSpuList();
            },

            changeCs() {
                this.$refs.cs.disabled = !this.$refs.cs.disabled;
            },

            // 点击添加SPU功能
            showAdd() {
                this.showList = false;

                this.changeCs();

                this.$refs.spuForm.reset();

                this.$refs.spuForm.initAddData(this.category3Id);
            },

            // 子组件修改父组件showList方法
            showListFn() {
                this.showList = true;
            },

            // 点击修改按钮实现功能
            showEdit(row) {
                // row就是一个简要的spuInfo信息
                this.showList = false;

                this.$refs.spuForm.initUpdateData(row.id);
            },

            // 子组件通常父组件重新刷新页面
            successFn() {
                this.getSpuList(this.page);
            },

            async deleteSpu(row) {
                const {code} = await this.$API.spu.reqDeleteSpu(row.id);
                if(code === 200) {
                    this.$message({
                        message: '删除成功',
                        type: 'success'
                    });
                    this.getSpuList(this.spuList.length > 1? this.page:this.page-1);
                }
            },

            addSku(row) {
                this.showSub = true;

                // 父组件调用子组件的方法,让子组件发请求
                this.$refs.sub.getData(row,this.category1Id,this.category2Id);
            },

            // 查看sku按钮的回调
            async handler(spu) {
                this.spu = spu;
                this.dialogTableVisible = true;

                // 发送请求
                this.loading = true;
                const {code,data} = await this.$API.spu.reqSkuList(spu.id);
                if(code === 200) {
                    this.loading = false;
                    this.skuList = data;
                }
            },

            // 关闭对话框的回调
            close(done) {
                this.loading = false;
                this.skuList = [];
                // done:改变对话框
                done();
            }
        },

        components: {
            spuForm: spuForm,
            Sub: Sub,
        },

        name: "Sup",
    }
</script>

<style scoped>
</style>
